<template>
    <div class="header">
        <span>{{ span }}</span>
      <el-icon :size="18" v-if="!isMy"><Search /></el-icon>
      <el-icon :size="18" v-else><Tools /></el-icon>
    </div>
</template>

<script setup>
 import { ref, watch} from 'vue';

const span =ref('today')
const props = defineProps({
    nowRouter: String
});
const isMy = ref(false)

const select =()=>{
    if(props.nowRouter==='/today'){
        span.value='today'
        isMy.value=false
    }else if(props.nowRouter==='/discovery'){
        span.value='发现'
        isMy.value=false
    }else if(props.nowRouter==='/bookmarks'){
        span.value='摘抄本'
        isMy.value=false
    }else if(props.nowRouter==='/my'){
        span.value='我的'
        isMy.value=true
    }
    
}

watch(() => props.nowRouter, () => {
    select();
}, {
    immediate: true // 立即执行一次回调函数
});
</script>

<style lang="less" scoped>
.header{
    height: 3.5rem;
    background: #7B68EE;
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.05);
    display: flex;
    position: fixed;
    top:0;
    width: 100%;
    color:#fff;
    align-items: center;
    text-align: center;
    justify-content: space-between;
    padding: 1rem;
    box-sizing: border-box;
    span{
        font-size: 1.125rem;
        color: #FFFFFF;
        line-height: 1.75rem;
    }

}

</style>